<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>猜拳</title>
	<style>
		label{height: 50px;line-height: 50px;}
		.my,.computer{height: 80px;line-height: 80px;border: 0;text-align: center;}
		.start{height: 30px;width: 50px;line-height: 30px;background-color: #366;color: snow;border: 0;font-size: 20px;outline: 0;margin-right: 50px;}
		.result{width: 100px;height: 50px;line-height: 50px;border: 0;}
	</style>
</head>
<body>
	<label>我：<input type="text" class="my" id="my"></label>
	<label>电脑：<input type="text" class="computer" id="computer"></label>

	<input type="button" id="start" class="start" value="start">
	<input type="text" id="result" class="result">
	<script>
		var type = ['剪刀','石头' ,'布'];
		// var randomN = Math.floor(Math.random() * 3);
		var m = document.getElementById('my');
		var c = document.getElementById('computer');
		var res = document.getElementById('result');

		document.getElementById('start').onclick = function(){
			m.value = type[Math.floor(Math.random() * 3)]; //我的出拳
			c.value = type[Math.floor(Math.random() * 3)];//电脑的出拳

			//对c.value进行判断
			function judge(a){
				if(c.value == a){
					res.value = '电脑赢！！';
				}else{
					res.value = '我赢啦！！';
				}
			}
			//二者出拳对决
			if(m.value == c.value){
				res.value = '平局 again!!!';
			}else if(m.value == '剪刀'){
				judge('石头');
			}else if(m.value == '石头'){
				judge('布');
			}else if(m.value == '布'){
				judge('剪刀');
			}
		}
	</script>
</body>
</html>